<template>
	<view class="addAliAccount" v-if="user" :style="[{paddingTop:statusBar+ 'px'}]" >
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">支付宝管理</view>
		</view>
		<view class="navigation-position"></view>
		<view class="unbound-ali-account" v-if="user.alipay_user_no!=''">
			<view class="ali-account-form">
				<view>支付宝账号</view>
				<input type="text" :value="user.alipay_user_no" disabled="true" class="bound-ali-account" placeholder="" placeholder-style="color:#333333;font-size:32rpx;" />
				<view class="delete-ali-account" @click="deleteAlipayUserNo()">解绑</view>
			</view>
		</view>
		<view class="bind-ali-account" v-else>
			<view class="bind-ali-account-title">绑定支付宝</view>
			<view class="bind-ali-account-tips">请输入本人的支付宝账号</view>
			<view class="ali-account-form">
				<view>支付宝账号</view>
				<input type="text" value="" v-model="alipayNserNo" placeholder="请输入支付宝账号" placeholder-style="color:#333333;font-size:32rpx;" />
			</view>
			<view class="confirm-add-btn" @click="addAlipayUserNo()">确认添加</view>
		</view>
		<view class="webtips">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { updataAlipayUserNo } from 'api/userAccountApi'
	import { getUser } from "api/userApi"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		data(){
			return {
				isBind:'false',
				alipayNserNo:'',
				source:source
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			addAlipayUserNo(){
				let freelance = this.user.freelance;
				if(!freelance){
					uni.showModal({
						title: '提示',
						content: '您还未完成实名认证，请先完成认证后可提现！',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/packs/pages/withdrawal/realIdentification'
								})
							}
						}
					})
				}else{
					if(this.alipayNserNo==''){
						uni.showToast({
							icon:'none',
							title:'请输入支付宝账号进行绑定！'
						})
					}else{
						let parms = {
							alipay_user_no:this.alipayNserNo
						}
						updataAlipayUserNo(parms).then(res=>{
							this.alipayNserNo = ''
							if(this.source == 'wap'){
								uni.showToast({
									icon:'success',
									title:'添加成功!'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},500)	
							}else{
								this.getUser()
								setTimeout(()=>{
									uni.showToast({
										icon:'success',
										title:'添加成功!'
									})
								},100)	
							}
						})
					}
				}
			},
			deleteAlipayUserNo(){
				let parms = {
					alipay_user_no:''
				}
				updataAlipayUserNo(parms).then(res=>{
					this.getUser()
					setTimeout(()=>{
						uni.showToast({
							icon:'success',
							title:'解绑成功!'
						})
					},500)
				})
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			await this.getUser()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.bind-ali-account,.unbound-ali-account{
		padding-top: 40rpx;
	}
	.bind-ali-account-title{
		font-size: 48rpx;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
	}
	.bind-ali-account-tips{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
		text-align: center;
		margin:24rpx 0 48rpx 0;
	}
	.ali-account-form{
		width: 690rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		>view{
			font-size: 32rpx;
			font-weight: 400;
			color:#666666;
			margin:0 48rpx 0 32rpx;
		}
		>input{
			width: 440rpx;
			font-size: 32rpx;
			color: #333333;
		}
		.bound-ali-account{
			width: 300rpx;
		}
		.delete-ali-account{
			font-size: 28rpx;
			font-weight: 400;
			color: #FF6011;
		}
	}
	.confirm-add-btn{
		width: 550rpx;
		height: 96rpx;
		background: #1877FF;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin:128rpx auto 0;
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
</style>
